<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频流播放器</title>
    <style>
        /* 播放器容器 */
        .video-player-container {
            max-width: 800px;
            margin: 20px auto;
            background: #000;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
        }
        
        /* 视频元素 */
        .video-player {
            width: 100%;
            display: block;
        }
        
        /* 控制栏 */
        .video-controls {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding: 10px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            transition: opacity 0.3s;
        }
        
        /* 隐藏控制栏时的状态 */
        .video-player-container:hover .video-controls {
            opacity: 1;
        }
        .video-controls {
            opacity: 0;
        }
        
        /* 控制按钮 */
        .control-btn {
            background: none;
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
            padding: 5px 10px;
            margin-right: 5px;
        }
        
        /* 进度条容器 */
        .progress-container {
            flex: 1;
            height: 20px;
            position: relative;
            margin: 0 10px;
            cursor: pointer;
        }
        
        /* 进度条 */
        .progress-bar {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 4px;
            border-radius: 2px;
            background: #ff0000;
            width: 0;
        }
        
        /* 缓冲条 */
        .buffered-bar {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 4px;
            border-radius: 2px;
            background: rgba(255, 255, 255, 0.3);
            width: 0;
        }
        
        /* 时间显示 */
        .time-display {
            font-size: 12px;
            margin-left: 10px;
            min-width: 100px;
            text-align: center;
        }
        
        /* 音量控制 */
        .volume-control {
            display: flex;
            align-items: center;
            margin-right: 10px;
        }
        
        /* 全屏按钮 */
        .fullscreen-btn {
            margin-left: auto;
        }
        
        /* 加载指示器 */
        .loading-indicator {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            display: none;
        }
    </style>
</head>
<body>
    <div class="video-player-container">
        <video class="video-player" id="videoPlayer">
            <!-- 视频源将通过JavaScript动态添加 -->
        </video>
        
        <div class="loading-indicator" id="loadingIndicator">
            加载中...
        </div>
        
        <div class="video-controls">
            <button class="control-btn play-pause-btn" id="playPauseBtn">▶</button>
            
            <div class="progress-container" id="progressContainer">
                <div class="buffered-bar" id="bufferedBar"></div>
                <div class="progress-bar" id="progressBar"></div>
            </div>
            
            <span class="time-display" id="timeDisplay">00:00 / 00:00</span>
            
            <div class="volume-control">
                <button class="control-btn volume-btn" id="volumeBtn">🔊</button>
                <input type="range" min="0" max="1" step="0.1" value="1" id="volumeSlider">
            </div>
            
            <button class="control-btn fullscreen-btn" id="fullscreenBtn">⛶</button>
        </div>
    </div>
    
    <div style="text-align: center; margin: 20px;">
        <button id="stream1Btn">加载直播流1 (HLS)</button>
        <button id="stream2Btn">加载直播流2 (DASH)</button>
        <button id="stream3Btn">加载直播流3 (RTMP)</button>
    </div>

    <script>
        // 获取DOM元素
        const videoPlayer = document.getElementById('videoPlayer');
        const playPauseBtn = document.getElementById('playPauseBtn');
        const progressBar = document.getElementById('progressBar');
        const bufferedBar = document.getElementById('bufferedBar');
        const progressContainer = document.getElementById('progressContainer');
        const timeDisplay = document.getElementById('timeDisplay');
        const volumeBtn = document.getElementById('volumeBtn');
        const volumeSlider = document.getElementById('volumeSlider');
        const fullscreenBtn = document.getElementById('fullscreenBtn');
        const loadingIndicator = document.getElementById('loadingIndicator');
        
        // 视频流源
        const videoStreams = {
            hls: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
            dash: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',
            rtmp: 'rtmp://184.72.239.149/vod/BigBuckBunny_115k.mov'
        };
        
        // 初始化播放器
        function initPlayer() {
            // 播放/暂停切换
            playPauseBtn.addEventListener('click', togglePlayPause);
            
            // 进度条点击跳转
            progressContainer.addEventListener('click', seek);
            
            // 音量控制
            volumeSlider.addEventListener('input', setVolume);
            volumeBtn.addEventListener('click', toggleMute);
            
            // 全屏控制
            fullscreenBtn.addEventListener('click', toggleFullscreen);
            
            // 视频事件监听
            videoPlayer.addEventListener('timeupdate', updateProgress);
            videoPlayer.addEventListener('progress', updateBuffered);
            videoPlayer.addEventListener('waiting', showLoading);
            videoPlayer.addEventListener('playing', hideLoading);
            videoPlayer.addEventListener('ended', onVideoEnded);
            
            // 加载默认流
            loadStream(videoStreams.hls);
        }
        
        // 加载视频流
        function loadStream(streamUrl) {
            showLoading();
            
            // 清除旧源
            videoPlayer.src = '';
            
            // 检测流类型并设置相应源
            if (streamUrl.endsWith('.m3u8')) {
                // HLS流
                if (Hls.isSupported()) {
                    const hls = new Hls();
                    hls.loadSource(streamUrl);
                    hls.attachMedia(videoPlayer);
                    hls.on(Hls.Events.MANIFEST_PARSED, function() {
                        videoPlayer.play();
                    });
                } else if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
                    // Safari原生支持
                    videoPlayer.src = streamUrl;
                    videoPlayer.addEventListener('loadedmetadata', function() {
                        videoPlayer.play();
                    });
                } else {
                    alert('您的浏览器不支持HLS流播放');
                }
            } else if (streamUrl.endsWith('.mpd')) {
                // DASH流
                if (typeof dashjs !== 'undefined') {
                    const player = dashjs.MediaPlayer().create();
                    player.initialize(videoPlayer, streamUrl, true);
                    player.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, function() {
                        videoPlayer.play();
                    });
                } else {
                    alert('请先加载dash.js库以支持DASH流播放');
                }
            } else if (streamUrl.startsWith('rtmp://')) {
                // RTMP流 (需要Flash或转码)
                alert('RTMP流需要Flash支持或转换为HLS/DASH格式');
            } else {
                // 常规视频文件
                videoPlayer.src = streamUrl;
                videoPlayer.addEventListener('loadedmetadata', function() {
                    videoPlayer.play();
                });
            }
        }
        
        // 播放/暂停切换
        function togglePlayPause() {
            if (videoPlayer.paused) {
                videoPlayer.play();
                playPauseBtn.textContent = '❚❚';
            } else {
                videoPlayer.pause();
                playPauseBtn.textContent = '▶';
            }
        }
        
        // 跳转到指定时间
        function seek(e) {
            const rect = progressContainer.getBoundingClientRect();
            const pos = (e.clientX - rect.left) / rect.width;
            videoPlayer.currentTime = pos * videoPlayer.duration;
        }
        
        // 更新进度条
        function updateProgress() {
            const percent = (videoPlayer.currentTime / videoPlayer.duration) * 100;
            progressBar.style.width = percent + '%';
            updateTimeDisplay();
        }
        
        // 更新缓冲条
        function updateBuffered() {
            if (videoPlayer.buffered.length > 0) {
                const bufferedEnd = videoPlayer.buffered.end(videoPlayer.buffered.length - 1);
                const percent = (bufferedEnd / videoPlayer.duration) * 100;
                bufferedBar.style.width = percent + '%';
            }
        }
        
        // 更新时间显示
        function updateTimeDisplay() {
            const formatTime = (time) => {
                const minutes = Math.floor(time / 60);
                const seconds = Math.floor(time % 60);
                return minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
            };
            
            timeDisplay.textContent = formatTime(videoPlayer.currentTime) + ' / ' + formatTime(videoPlayer.duration);
        }
        
        // 设置音量
        function setVolume() {
            videoPlayer.volume = volumeSlider.value;
            volumeBtn.textContent = videoPlayer.volume === 0 ? '🔇' : '🔊';
        }
        
        // 静音切换
        function toggleMute() {
            videoPlayer.muted = !videoPlayer.muted;
            volumeBtn.textContent = videoPlayer.muted ? '🔇' : '🔊';
            volumeSlider.value = videoPlayer.muted ? 0 : videoPlayer.volume;
        }
        
        // 全屏切换
        function toggleFullscreen() {
            if (!document.fullscreenElement) {
                videoPlayer.requestFullscreen().catch(err => {
                    alert(`全屏错误: ${err.message}`);
                });
            } else {
                document.exitFullscreen();
            }
        }
        
        // 显示加载指示器
        function showLoading() {
            loadingIndicator.style.display = 'block';
        }
        
        // 隐藏加载指示器
        function hideLoading() {
            loadingIndicator.style.display = 'none';
        }
        
        // 视频结束处理
        function onVideoEnded() {
            playPauseBtn.textContent = '▶';
        }
        
        // 流选择按钮事件
        document.getElementById('stream1Btn').addEventListener('click', () => {
            loadStream(videoStreams.hls);
        });
        
        document.getElementById('stream2Btn').addEventListener('click', () => {
            loadStream(videoStreams.dash);
        });
        
        document.getElementById('stream3Btn').addEventListener('click', () => {
            loadStream(videoStreams.rtmp);
        });
        
        // 初始化播放器
        initPlayer();
    </script>
    
    <!-- 引入HLS.js库 -->
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    
    <!-- 引入DASH.js库 -->
    <script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
</body>
</html>
